<template>
  <div>
    <!-- 头部 -->
    <headers :form-data="wareObj" :name-list="nameList" @searchFn="publicFn" @resetBtn="resetForm" />
    <!-- 内容区 -->
    <el-card>
      <!-- 表单 -->
      <tableData
        :table-name="wareHouseList"
        :arr="arr"
        :table-obj="tableObj"
        :form="wareObj"
        @delFn="delFn"
        @stopBtn="stopBtn"
        @publicFn="publicFn"
      />
      <!-- 分页器 -->
      <Page
        :params="wareObj"
        :total="total"
        @updataTable="getWareHouseFn"
      />
    </el-card>
  </div>
</template>

<script>
import { wareHouseApi, delWare } from '@/api'
import Page from '@/components/Public/page.vue'
import headers from '@/components/Public/header.vue'
import tableData from '@/components/Public/tableDate.vue'
export default {
  components: { Page, headers, tableData },
  data() {
    return {
      nameList: ['仓库编号', '仓库名称', '仓库状态'],
      arr: ['仓库编码', '仓库名称', '仓库类型', '省/市/区', '详细地址', '仓库状态', '仓库面积m²', '库区数量', '负责人', '联系电话', '更新时间'],
      tableObj: {
        '仓库编码': 'code',
        '仓库名称': 'name',
        '仓库类型': 'type',
        '省/市/区': 'location',
        '详细地址': 'address',
        '仓库状态': 'status',
        '仓库面积m²': 'surface',
        '库区数量': 'includedNum',
        '负责人': 'personName',
        '联系电话': 'phone',
        '更新时间': 'updateTime'
      },
      wareObj: {
        like_code: '',
        like_name: '',
        current: 1,
        size: 10,
        descs: 'createTime'
      },
      total: 0,
      wareHouseList: [],
      isShow: false,
      statusObj: {}
    }
  },
  created() {
    this.getWareHouseFn(this.wareObj)
  },
  methods: {
    // 删除
    async delFn(val) {
      await delWare(val.id)
      this.getWareHouseFn(this.wareObj)
      this.$message.success('删除成功')
    },
    // 点击打开启用禁用
    stopBtn(val) {
      this.statusObj.status = val.status
      this.statusObj.id = val.id
      this.isShow = true
    },
    // 获取表单数据
    async getWareHouseFn(val) {
      const { data: { data }} = await wareHouseApi(val)
      // console.log(data)
      this.wareHouseList = data.records
      this.total = Number(data.total)
    },
    publicFn(val) {
      this.wareObj = {
        like_code: val.code, // 仓库编号
        like_name: val.name, // 仓库名称
        current: val.current, // 页
        size: val.size, // 数量
        status: val.status// 状态
      }
      this.getWareHouseFn(this.wareObj)
    },
    // 重置
    resetForm() {
      // this.$refs.formRef.resetFields()
      // console.log(this.$refs.formRef)
      this.wareObj = {
        like_code: '', // 第一个输入框
        like_name: '', // 第二个输入框
        status: null, // 状态
        current: 1, // 页
        size: 10 // 数量
      }
      this.getWareHouseFn(this.wareObj)
    }
  }
}
</script>

<style lang="scss" scope>
  .el-card{
    margin-bottom: 30px;
  }
  .el-button {
    margin-bottom: 20px;
  }
</style>
